html { color: #000; background: #fff;}body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin: 0; padding: 0;}table { border-collapse: collapse; border-spacing: 0;}fieldset, img { border: 0;}address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal;}ol, ul { list-style: none;}caption, th { text-align: left;}h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal;}q:before, q:after { content: '';}abbr, acronym { border: 0; font-variant: normal;}sup { vertical-align: text-top;}sub { vertical-align: text-bottom;}input, textarea, select { font-family: inherit; font-size: inherit; font-weight: inherit;}input, textarea, select { *font-size: 100%;}legend { color: #000;}* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}select, button, input { appearance: button; -moz-appearance: button; -webkit-appearance: button;}html, body { -webkit-overflow-scrolling: touch; min-width: 280px;}body { -webkit-text-size-adjust: 100%;}html, body, #layout, #page { height: 100%;}@font-face { font-family: 'brandon_grotesqueblack'; src: url('../font/BrandonGrotesque-Black.eot'); src: url('../font/BrandonGrotesque-Black.eot?#iefix') format('embedded-opentype'), url('../font/BrandonGrotesque-Black.woff') format('woff'), url('../font/BrandonGrotesque-Black.ttf') format('truetype'), url('../font/BrandonGrotesque-Black.svg#brandon_grotesqueblack') format('svg'); font-weight: normal; font-style: normal;}@font-face { font-family: 'Georgia'; src: url('../font/Georgia-Italic.eot'); src: url('../font/Georgia-Italic.eot?#iefix') format('embedded-opentype'), url('../font/Georgia-Italic.woff') format('woff'), url('../font/Georgia-Italic.ttf') format('truetype'); font-weight: normal; font-style: italic;}body { font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 30px; color: #666;} @media (max-width: 1320px) { body { font-size: 24px;}} @media (max-width: 1000px) { body { font-size: 18px;}} @media (max-width: 767px) {}#download-table, #nav, #footer, h1, h2, h3, h4, h5, h6, input { font-family: 'brandon_grotesqueblack', sans-serif;}h1, h2, h3, h4 { text-transform: uppercase;}h2.title { font-size: 90px; line-height: 60px;} @media (max-width: 1320px) { h2.title { font-size: 60px;}} @media (max-width: 1000px) { h2.title { font-size: 48px; line-height: 48px;}} @media (max-width: 767px) { h2.title { font-size: 36px; line-height: 36px;}} h2.title .italic { font-size: 48px;} @media (max-width: 1320px) { h2.title .italic { font-size: 36px;}} @media (max-width: 1000px) { h2.title .italic { font-size: 30px;}} @media (max-width: 767px) { h2.title .italic { font-size: 24px;}} h2.title.mb { margin-bottom: 30px;} @media (max-width: 1320px) { h2.title.mb { margin-bottom: 20px;}} @media (max-width: 1000px) { h2.title.mb { margin-bottom: 10px;}}h3.subtitle { font-size: 48px; line-height: 60px;} @media (max-width: 1320px) { h3.subtitle { font-size: 36px; line-height: 48px;}} @media (max-width: 1000px) { h3.subtitle { font-size: 30px; line-height: 36px;}} @media (max-width: 767px) { h3.subtitle { font-size: 24px; line-height: 30px;}} h3.subtitle.mb { margin-bottom: 30px;} @media (max-width: 1320px) { h3.subtitle.mb { margin-bottom: 20px;}} @media (max-width: 1000px) { h3.subtitle.mb { margin-bottom: 10px;}}.italic { display: block; font-family: 'Georgia'; font-style: italic; text-transform: none;}a { text-decoration: none; color: #2da0a6;}h1, h2, h3, h4, h5, h6, p { margin-top: 0;}p { margin-bottom: 15px;}* > p:last-child { margin-bottom: 0;}::-webkit-scrollbar { width: 5px; height: 5px;}::-webkit-scrollbar-track { background: #eee; margin-right: 0; margin-top: 0;}::-webkit-scrollbar-thumb { background: #ccc;}input::selection, ::selection { color: #fff; background: #2da0a6;}input::-moz-selection, ::-moz-selection { color: #fff; background: #2da0a6;}.w.w25p { width: 25%;} .w.w50p { width: 50%;} .w.w75p { width: 75%;} .w.w100p { width: 100%;}.slick-initialized.slick-slider { position: relative;}.slick-next { right: 20px;}.slick-prev { left: 20px;}.slick-next, .slick-prev { display: inline-block; position: absolute; top: 50%; transform: translateY(-50%); background-size: contain; background-repeat: no-repeat; background-position: center center; background-color: transparent; width: 30px; height: 30px; border: 0; font-size: 1px; text-indent: -100000px; z-index: 800; cursor: pointer; transition: 0.3s; outline: 0;}.slick-disabled { opacity: 0.1; cursor: default;}html.mobile #layout { margin-left: 220px; margin-right: -220px;} @media (max-width: 1320px) { html.mobile #layout { margin-left: 0; margin-right: 0;}} html.mobile #layout .overlay { opacity: 1; visibility: visible; cursor: pointer;} @media (max-width: 1320px) { html.mobile #layout .overlay { display: none;}} html.mobile #layout .overlay:hover { background: rgba(0, 0, 0, 0);}.container { position: relative; margin: 0 auto; min-height: 1px; width: 100%; max-width: 1400px; padding-left: 20px; padding-right: 20px;} @media (max-width: 1420px) { .container { width: 1280px;}} @media (max-width: 1320px) { .container { width: 960px;}} @media (max-width: 1000px) { .container { width: 720px;}} @media (max-width: 767px) { .container { width: 100%; padding-left: 10px; padding-right: 10px;}} .container:after { content: ""; clear: both; display: table;}.row { margin: 0 -40px;} @media (max-width: 767px) { .row { margin: 0;}} .row:after { content: ""; clear: both; display: table;}.col { width: 100%; position: relative; min-height: 1px; float: left;} .row .col { width: calc(100% - 80px); margin: 40px;} .col.col2 { width: 50%;} .row .col.col2 { width: calc(50% - 80px); margin: 40px;} @media (max-width: 767px) { .row .col.col2 { width: 100%; margin: 10px 0;}} @media (max-width: 767px) { .col.col2 { width: 100%;}} .col.col3 { width: 33.33%;} .row .col.col3 { width: calc(33.33% - 80px); margin: 40px;} .col.col3x2 { width: 66.66%;} .col.col4 { width: 25%;} .col.col4x3 { width: 75%;} .col.col5 { width: 20%;} .col.col5x4 { width: 80%;} .col.col5x3 { width: 60%;} .col.col5x2 { width: 40%;} .col.col6 { width: 16.66%;}#loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; background: white; transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; -moz-transition: 0.3s; -webkit-transition: 0.3s;} html.loaded #loading { opacity: 0; visibility: hidden;} #loading img { width: 240px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; margin-top: -40px;} #loading span { width: 24px; height: 24px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-top: 40px;} #loading span:after { content: ''; position: absolute; top: 50%; left: 50%; margin: -12px 0 0 -12px; transform: translate(-50%, -50%); border-radius: 50%; width: 18px; height: 18px; border: 3px solid #2da0a6; border-top-color: transparent; -webkit-animation: spin 0.7s infinite linear; animation: spin 0.7s infinite linear;}#header { font-family: 'brandon_grotesqueblack', sans-serif; height: 140px; position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background-color: transparent; overflow: hidden; transition: 0.5s;} @media (max-width: 767px) { #header { height: 50px !important; min-width: 280px;}} html.header-small #header { height: 80px; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05); background-color: rgba(45, 160, 166, 0.95);} html.header-small #header ul { margin-top: 10px; margin-bottom: 10px;} html.header-white #header { background-color: rgba(255, 255, 255, 0.95);} html.header-white #header .logo span.white { opacity: 0;} html.header-white #header .logo span.color { opacity: 1;} html.header-white #header ul li a, html.header-white #header ul li span { color: #2da0a6;} html.header-white #header ul li a.active, html.header-white #header ul li span.active { color: #64cfd5;} html.header-white #header ul li a.border, html.header-white #header ul li span.border { border-color: rgba(45, 160, 166, 0.5);} html.header-white #header ul li a.border:hover, html.header-white #header ul li span.border:hover { background-color: rgba(45, 160, 166, 0.2); border-color: rgba(45, 160, 166, 0); color: #2da0a6;} html.header-white #header ul li a.share, html.header-white #header ul li span.share { border-color: rgba(45, 160, 166, 0.2);} html.header-white #header ul li a.share:after, html.header-white #header ul li span.share:after { background-image: url(../img/nav/share-blue.svg);} html.header-white #header ul li a.share:hover, html.header-white #header ul li span.share:hover { background-color: rgba(45, 160, 166, 0.2); border-color: rgba(45, 160, 166, 0);} #header h1 { display: none;} #header .nav-button { border: 3px solid rgba(255, 255, 255, 0.5); width: 40px; height: 40px; border-radius: 1000px; position: absolute; right: 20px; top: 50px; z-index: 100; padding: 10px 8px; transition: 0.5s; display: none; cursor: pointer;} #header .nav-button:hover { background-color: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0);} html.header-small #header .nav-button { top: 20px;} html.header-white #header .nav-button { border-color: rgba(45, 160, 166, 0.5);} html.header-white #header .nav-button:hover { background-color: rgba(45, 160, 166, 0.5); border-color: rgba(45, 160, 166, 0);} @media (max-width: 1000px) { #header .nav-button { display: block;}} @media (max-width: 767px) { #header .nav-button { top: 5px !important; border-color: transparent !important; right: auto; left: 0; background-color: transparent !important;}} #header .nav-button:hover span:nth-child(1) { margin-left: 20%; width: 80%;} #header .nav-button:hover span:nth-child(1) { margin-left: 40%; width: 60%;} #header .nav-button:hover span:nth-child(2) { margin-left: 20%; width: 80%;} #header .nav-button:hover span:nth-child(3) { width: 100%;} #header .nav-button span { display: block; width: 100%; height: 3px; background-color: white; margin-bottom: 3px; transition: 0.5s;} html.header-white #header .nav-button span { background-color: #2da0a6;} #header .nav-button span:nth-child(1) { width: 60%;} #header .nav-button span:nth-child(3) { width: 80%;} #header .logo { position: absolute; width: 140px; height: 140px; top: 0; left: 20px; transition: 0.5s;} #header .logo a { z-index: 100; position: absolute; top: 0; right: 0; bottom: 0; left: 0;} @media (max-width: 767px) { #header .logo { left: 50% !important; width: 80px !important; height: 50px !important; margin-left: -40px !important;}} html.unloaded #header .logo { transform: translateY(-20px); opacity: 0;} html.header-small #header .logo { height: 80px;} #header .logo span { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transition: 0.5s; background-color: transparent; background-size: contain; background-repeat: no-repeat; background-position: center center;} #header .logo span.white { background-image: url(../img/nav/logo-white.svg);} #header .logo span.color { opacity: 0; background-image: url(../img/nav/logo-color.svg);} #header ul { float: right; margin-top: 40px; margin-bottom: 40px; transition: 0.5s;} @media (max-width: 1000px) { #header ul { display: none;}} #header ul li { display: block; float: left; transition: 0.5s;} html.unloaded #header ul li { transform: translateY(-20px); opacity: 0;} html.unloaded-delay #header ul li:nth-child(1) { transition-delay: 0.1s;} html.unloaded-delay #header ul li:nth-child(2) { transition-delay: 0.2s;} html.unloaded-delay #header ul li:nth-child(3) { transition-delay: 0.3s;} html.unloaded-delay #header ul li:nth-child(4) { transition-delay: 0.4s;} html.unloaded-delay #header ul li:nth-child(5) { transition-delay: 0.5s;} html.unloaded-delay #header ul li:nth-child(6) { transition-delay: 0.6s;} html.unloaded-delay #header ul li:nth-child(7) { transition-delay: 0.7s;} html.unloaded-delay #header ul li:nth-child(8) { transition-delay: 0.8s;} #header ul li a, #header ul li span { transition: 0.3s; display: block; padding: 15px 12.5px; border: 3px solid transparent; font-size: 16px; font-weight: bold; text-transform: uppercase; text-decoration: none; overflow: hidden; color: white; position: relative; cursor: pointer;} @media (max-width: 1320px) { #header ul li a, #header ul li span { padding: 15px 5px;}} #header ul li a.active, #header ul li span.active { color: #64cfd5;} #header ul li a.border, #header ul li span.border { padding-left: 25px; padding-right: 25px; border-color: rgba(255, 255, 255, 0.5); border-radius: 1000px; margin-left: 12.5px;} @media (max-width: 1320px) { #header ul li a.border, #header ul li span.border { padding-left: 15px; padding-right: 15px; margin-left: 5px;}} #header ul li a.border:hover, #header ul li span.border:hover { background-color: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0); color: white;} #header ul li a.share, #header ul li span.share { text-indent: -9999px; width: 60px; margin-left: 25px; border-color: rgba(255, 255, 255, 0.2);} @media (max-width: 1320px) { #header ul li a.share, #header ul li span.share { margin-left: 5px;}} #header ul li a.share:after, #header ul li span.share:after { width: 20px; height: 20px; background-image: url(../img/nav/share-white.svg); content: ''; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} #header ul li a.share:hover, #header ul li span.share:hover { background-color: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0);}.publisher { opacity: 0; visibility: hidden; height: 0; width: 0; display: block; overflow: hidden;}.align-center { text-align: center;}.align-left { text-align: left;}.align-right { text-align: right;}ul.list { display: block; margin-bottom: 40px;} @media (max-width: 767px) { ul.list { margin-bottom: 20px;}} ul.list--color { color: #8cdce0;} ul.list--white { color: #fff;} ul.list li { padding: 30px 0 30px 50px; display: block; background-image: url(../img/list/check-white.svg); background-size: 30px; background-repeat: no-repeat; background-position: left center; border-bottom: 1px solid rgba(255, 255, 255, 0.2);} @media (max-width: 767px) { ul.list li { padding-top: 15px; padding-bottom: 15px; padding-left: 35px; background-size: 20px;}} ul.list li.ico-bell { background-image: url(../img/list/bell.svg);} ul.list li.ico-share { background-image: url(../img/list/share.svg);}@-webkit-keyframes spin { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);}}@keyframes spin { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);}}.anim-container.v > * { opacity: 0 !important; transform: translateY(-150%);}.anim-container.v.reverse > * { transform: translateY(150%);}.anim-container.v.v-left > * { transform: translateX(-10%);}.anim-container.v.v-left.reverse > * { transform: translateX(10%);}.anim-container > * { transition: 1s;}.anim-container { overflow: hidden;}.magic-text { display: block;} .magic-text span { transition: 0.3s; display: inline-block;} .magic-text span.inline { display: inline;} .magic-text span.vv { transform: translateY(50px); opacity: 0;} @media (max-width: 767px) { .magic-text span { display: inline;}}.line-skew { position: absolute; left: 0; right: 0; z-index: 100; overflow: hidden; transform: translate3d(0, 0, 0); transform-style: preserve-3d;} @media (max-height: 640px) { .section.section--home .line-skew { display: none;}} .line-skew:before { content: ''; transform: skewY(-2deg); position: absolute; width: 100%; left: 0; transition: 2s; transform-style: preserve-3d; z-index: 100;} .line-skew--white:before { background: white;} .line-skew--color:before { background: #2da0a6;} .line-skew--bottom { bottom: 0; height: 100px;} .line-skew--bottom:before { transform-origin: bottom left; bottom: -500px; height: 500px;} .line-skew--top { top: 0; height: 100px;} .line-skew--top:before { top: 0; height: 100px; transform-origin: top left;} html.unloaded-delay .line-skew:before { transition-delay: 0.5s;} html.unloaded .line-skew:before { bottom: 0; height: 0; transform: skewY(0);}#cookie { height: 0; position: fixed; bottom: 0; left: 0; right: 0; width: 100%; background-color: #2da0a6; z-index: 2010; overflow: hidden; color: white; transition: 0.3s; font-size: 16px; min-width: 280px;} html.bgcolor--orange2 #cookie { background-color: #ec631d;} html.bgcolor--pink #cookie { background-color: #ca128b;} html.bgcolor--purple2 #cookie { background-color: #46166b;} html.bgcolor--brown #cookie { background-color: #414140;} html.bgcolor--blue #cookie { background-color: #0075bc;} html.bgcolor--darkgray #cookie { background-color: #111;} html.bgcolor--orange #cookie { background-color: #e14e0e;} html.bgcolor--lightblue #cookie { background-color: #4a9dd3;} html.bgcolor--darkpurple #cookie { background-color: #3d0361;} html.bgcolor--purple #cookie { background-color: #a04fa8;} html.header-small #cookie { background-color: #2da0a6;} @media (max-width: 1000px) { #cookie { font-size: 14px;}} @media (max-width: 767px) { #cookie { font-size: 12px;}} #cookie a { color: white; text-decoration: none; opacity: 0.7;} #cookie span { width: 50px; height: 50px; display: block; top: 0; right: 45px; position: absolute; z-index: 10; cursor: pointer;} @media (max-width: 1000px) { #cookie span { right: 15px;}} @media (max-width: 767px) { #cookie span { height: 60px; right: 5px;}} #cookie span:before, #cookie span:after { content: ''; width: 40%; height: 4px; background: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg);} @media (max-width: 767px) { #cookie span:before, #cookie span:after { width: 35%; height: 3px;}} #cookie span:before { transform: translate(-50%, -50%) rotate(-45deg);} #cookie p { position: absolute; top: 50%; left: 50px; padding: 0 60px 0 10px; -webkit-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%); opacity: 0; transition: 0.3s;} html.cookie #cookie p { opacity: 1;} @media (max-width: 1000px) { #cookie p { left: 20px;}} @media (max-width: 767px) { #cookie p { left: 10px;}} html.cookie #cookie { height: 50px;} @media (max-width: 767px) { html.cookie #cookie { height: 60px;}}.section { position: relative; overflow: hidden;} .section.bg-eee { background-color: #eee;} .section.bg-white, .section.bg-fff { background-color: #fff;} .section.bg-999 { background-color: #999;} .section.bg-color { background-color: #2da0a6;} .section:after { content: ""; clear: both; display: table;}.section .table-scroll { overflow: hidden; overflow-x: auto; margin-bottom: 20px;} .section .table-scroll table { border-collapse: collapse; width: 100%; margin-bottom: 20px;} .section .table-scroll table th, .section .table-scroll table td { padding: 10px;} .section--first { padding-top: 140px;} @media (max-width: 767px) { .section--first { padding-top: 0;}} .section--default .container { padding-top: 80px; padding-bottom: 80px;} .section section#policies h2, .section section#policies h3 { margin-bottom: 15px;} .section section#policies p.last { margin-bottom: 40px;} .section section#policies ul { list-style-type: disc; padding: 20px 0 40px 40px;} .section section#policies ul li { margin-bottom: 10px;} .section section#policies ul li ul { padding-bottom: 0; list-style-type: circle;} .section section#policies p.pad { margin: 30px 0;} .section .red { color: #c10000;}.section--standard { padding: 80px 0 40px;} .section--standard h2 { text-align: center; color: #333;} .section--standard h2 .italic { color: #666;} .section--standard h3 { color: #333;} .section--standard h3 .ico { float: left; width: 60px; height: 60px; vertical-align: bottom; background-size: contain; background-repeat: no-repeat; background-position: center center; display: inline-block; margin-right: 10px;} @media (max-width: 1320px) { .section--standard h3 .ico { width: 48px; height: 48px;}} @media (max-width: 1000px) { .section--standard h3 .ico { width: 36px; height: 36px;}} @media (max-width: 767px) { .section--standard h3 .ico { width: 30px; height: 30px;}} .section--standard p.lead { text-align: center; font-size: 32px; margin-bottom: 60px;} @media (max-width: 1320px) { .section--standard p.lead { font-size: 24px;}} @media (max-width: 1000px) { .section--standard p.lead { font-size: 20px;}}.section--home { color: white; height: 100%; padding-top: 200px; transition: 0.5s;} html.bgcolor--orange2 .section--home { background-color: #ec631d;} html.bgcolor--pink .section--home { background-color: #ca128b;} html.bgcolor--purple2 .section--home { background-color: #46166b;} html.bgcolor--brown .section--home { background-color: #414140;} html.bgcolor--blue .section--home { background-color: #0075bc;} html.bgcolor--darkgray .section--home { background-color: #111;} html.bgcolor--orange .section--home { background-color: #e14e0e;} html.bgcolor--lightblue .section--home { background-color: #4a9dd3;} html.bgcolor--darkpurple .section--home { background-color: #3d0361;} html.bgcolor--purple .section--home { background-color: #a04fa8;} .section--home .container { height: 100%;} .section--home .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;} .section--home .bg canvas { position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); opacity: 0.3;} html.isMobile .section--home .bg canvas, html.isTablet .section--home .bg canvas, html.isPhone .section--home .bg canvas, html.isTouch .section--home .bg canvas { display: none;} .section--home h2.title { font-size: 72px; line-height: 72px; text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.2);} @media (max-width: 1000px) { .section--home h2.title { font-size: 60px; line-height: 60px;}} @media (max-width: 767px) { .section--home h2.title { font-size: 36px; line-height: 36px;}} .section--home h2.title .small { font-size: 36px; line-height: 36px;} .section--home .text { width: 100%; max-width: 880px; position: absolute; top: 50%; transform: translateY(-50%); margin-top: -70px; z-index: 30;} @media (max-width: 767px) { .section--home .text { width: auto; left: 10px; right: 10px; text-align: center;}} .section--home .ipad { width: 70%; background-image: url(../img/section--home/ipad.png); background-size: contain; background-repeat: no-repeat; background-position: center center; position: absolute; right: -30%; bottom: 60px; top: -60px; transition: 2s;} .section--home .ipad .monitor .slick-dots { display: none !important;} html.unloaded .section--home .ipad { transform: translateX(-20%); opacity: 0;} @media (max-width: 767px) { .section--home .ipad { display: none;}} .section--home .phone { width: 50%; background-image: url(../img/section--home/iphone.png); background-size: contain; background-repeat: no-repeat; background-position: center center; position: absolute; right: 0; bottom: 60px; top: -40px; transition: 2s;} .section--home .phone .monitor { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10;} .section--home .phone .monitor .slick-dots { z-index: 2000; position: absolute; top: 50%; left: 0; margin: 175px 0 0 -685px; transition: 0.7s;} html.unloaded-delay .section--home .phone .monitor .slick-dots { opacity: 0; transform: translateY(50px);} @media (max-width: 1420px) { .section--home .phone .monitor .slick-dots { margin: 175px 0 0 -625px;}} @media (max-width: 1320px) { .section--home .phone .monitor .slick-dots { margin: 155px 0 0 -465px;}} @media (max-width: 1000px) { .section--home .phone .monitor .slick-dots { margin: 115px 0 0 -345px;}} .section--home .phone .monitor .slick-dots li { float: left; width: 10px; height: 10px; background-color: rgba(255, 255, 255, 0.2); border-radius: 1000px; margin: 5px; cursor: pointer;} .section--home .phone .monitor .slick-dots li.slick-active { background-color: #fff;} .section--home .phone .monitor .slick-dots li button { opacity: 0;} .section--home .phone .slide { position: absolute !important; top: 0; left: 0 !important; width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; background-position: center center; outline: 0;} .section--home .phone .slick-track { top: 0; left: 0; width: 100%; height: 100%;} .section--home .phone .slick-list { position: absolute; top: 0; right: 0; bottom: 0; left: 0;} html.unloaded .section--home .phone { transform: translateX(-20%); opacity: 0;} @media (max-width: 767px) { .section--home .phone { display: none;}}.section--why-use { height: 300%;} @media (max-width: 767px) { .section--why-use { height: auto;}} .section--why-use .container { height: 100%;} @media (max-width: 767px) { .section--why-use .container { height: auto;}} .section--why-use .txt { position: absolute; transform: translate(-50%, -50%); top: 16.75%; width: 420px; text-align: left; left: 50%; margin-left: 420px;} @media (max-width: 1320px) { .section--why-use .txt { width: 320px; margin-left: 320px;}} @media (max-width: 1000px) { .section--why-use .txt { width: 250px; margin-left: 230px;}} @media (max-width: 767px) { .section--why-use .txt { position: static !important; width: 100% !important; margin: 0 !important; transform: none !important; text-align: center !important;}} .section--why-use .txt .ico { display: block; width: 200px; height: 200px; background-size: contain; background-repeat: no-repeat; background-position: center center;} @media (max-width: 1000px) { .section--why-use .txt .ico { width: 120px; height: 120px;}} @media (max-width: 767px) { .section--why-use .txt .ico { margin: 0 auto;}} .section--why-use .txt .ico--1 { background-image: url(../img/section--why-use/1.svg);} .section--why-use .txt .ico--2 { background-image: url(../img/section--why-use/2.svg);} .section--why-use .txt h3.subtitle { color: #333;} .section--why-use .txt__text { transition: 2s; overflow: hidden; transform: translateY(-40px);} @media (max-width: 767px) { .section--why-use .txt__text { visibility: visible !important; opacity: 1 !important; transform: none !important; height: auto !important; margin: 0 0 40px !important;}} .section--why-use .txt__text--1 { opacity: 1; visibility: visible; height: auto; transform: translateY(0);} .section--why-use .txt__text--2 { opacity: 0; visibility: hidden; height: 0; transform: translateY(-40px);} html.phone--1 .section--why-use .txt__text--1 { opacity: 0; visibility: hidden; height: 0; transform: translateY(-40px);} html.phone--1 .section--why-use .txt__text--2 { opacity: 1; visibility: visible; height: auto; transform: translateY(0);} .section--why-use .main { position: absolute; transform: translate(-50%, -50%); top: 16.75%; width: 420px; text-align: right; left: 50%; margin-left: -420px;} @media (max-width: 1320px) { .section--why-use .main { width: 320px; margin-left: -320px;}} @media (max-width: 1000px) { .section--why-use .main { width: 250px; margin-left: -230px;}} @media (max-width: 767px) { .section--why-use .main { position: static !important; width: 100% !important; margin: 0 0 40px !important; transform: none !important; text-align: center !important;}} .section--why-use .main h2 { color: #2da0a6;} .section--why-use .main h2 .italic { color: #333;} .section--why-use .phone { width: 380px; height: 720px; background-image: url(../img/section--why-use/iphone.png); position: absolute; left: 50%; transform: translate(-50%, -50%); top: 16.75%;} @media (max-width: 1320px) { .section--why-use .phone { transform: translate(-50%, -50%) scale(0.7);}} @media (max-width: 1000px) { .section--why-use .phone { transform: translate(-50%, -50%) scale(0.5);}} @media (max-width: 767px) { .section--why-use .phone { position: relative !important; top: auto !important; left: 50% !important; -webkit-transform: translateX(-50%) scale(0.5) !important; transform: scale(0.5) !important; margin: -120px 0 -120px -190px !important; display: block !important;}} .section--why-use .phone .monitor { width: 282px; height: 502px; background-color: white; position: absolute; top: 103px; left: 48px;} .section--why-use .phone .monitor:after { width: 70%; height: 70%; transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; content: ''; background-repeat: no-repeat; background-size: contain; background-position: center center; background-image: url(../img/nav/logo-color.svg);} html.phone--0 .section--why-use .txt, html.phone--0 .section--why-use .main { position: fixed; top: 50%;} html.phone--0 .section--why-use .phone { display: none;}#phone { width: 380px; height: 720px; left: 50%; transform: translate(-50%, -50%); position: fixed; top: 50%; z-index: 100; display: none; transition: 2s;} @media (max-width: 1320px) { #phone { transform: translate(-50%, -50%) scale(0.7);}} @media (max-width: 1000px) { #phone { transform: translate(-50%, -50%) scale(0.5);}} @media (max-width: 767px) { #phone { display: none !important;}} #phone .phone { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url(../img/section--why-use/iphone.png); z-index: 9;} #phone .monitor { width: 282px; height: 502px; background: blue; position: absolute; top: 103px; left: 48px; z-index: 10;} #phone .monitor .slide { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-position: center center; background-size: contain; background-repeat: no-repeat; transition: 0.5s;} #phone .monitor .slide--0 { background-color: #fff; z-index: 25;} #phone .monitor .slide--0:after { width: 70%; height: 70%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; content: ''; background-repeat: no-repeat; background-size: contain; background-position: center center; background-image: url(../img/nav/logo-color.svg);} html.phone--0.phone--0--fade #phone .monitor .slide--0 { opacity: 0;} #phone .monitor .slide--1 { background-image: url(../img/section--why-use/001.jpg); z-index: 20;} html.phone--1 #phone .monitor .slide--1 { opacity: 0;} #phone .monitor .slide--2 { background-image: url(../img/section--why-use/004.jpg); z-index: 15;} html.phone--2 #phone .monitor .slide--2 { opacity: 0;} #phone .monitor .slide--3 { background-image: url(../img/section--why-use/002.jpg); z-index: 10;} html.phone--3 #phone .monitor .slide--3 { opacity: 0;} #phone .monitor .slide--4 { background-image: url(../img/section--why-use/003.jpg); z-index: 5;} #phone .back { width: 282px; height: 402px; position: absolute; top: 103px; left: 48px; transition: 1s; transform-origin: 0% 100%;} #phone .back--0 { background: #188a8f; z-index: 3;} #phone .back--1 { background: #1a7579; z-index: 2;} #phone .back--2 { background: #105d60; z-index: 1;} html.phone--3 #phone .back--0 { transform: rotate(-15deg); transform-origin: 20% 100%; transition-delay: 0.3s;} html.phone--3 #phone .back--1 { transform: rotate(-30deg); transform-origin: 60% 100%; transition-delay: 0.6s;} html.phone--3 #phone .back--2 { transform: rotate(-45deg); transform-origin: 80% 100%; transition-delay: 0.9s;} html.phone--0 #phone { display: block;} html.phone--3 #phone { margin-left: -240px; position: absolute; top: 50%;} @media (max-width: 1000px) { html.phone--3 #phone { min-width: -220px;}}.section--how-it-works { height: 100%;} @media (max-width: 767px) { .section--how-it-works { height: auto;}} .section--how-it-works .container { height: 100%; color: white;} @media (max-width: 767px) { .section--how-it-works .container { height: auto;}} .section--how-it-works .container .main { position: absolute; transform: translate(0, -50%); top: 50%; width: 50%; min-width: 580px; text-align: left; right: 0; z-index: 110;} @media (max-width: 1000px) { .section--how-it-works .container .main { min-width: 480px;}} @media (max-width: 767px) { .section--how-it-works .container .main { position: static; text-align: center; min-width: 0; transform: none; width: auto; padding: 40px 0;}} .section--how-it-works .container .main h2 .italic { color: #333;}.section--for-shopping-centres { background-color: #fff; text-align: center;} .section--for-shopping-centres .container { padding-top: 40px; padding-bottom: 80px;} .section--for-shopping-centres .container h2.title { color: #2da0a6;} .section--for-shopping-centres .container h3.subtitle { color: #333;} .section--for-shopping-centres .container .boxes { font-size: 18px; margin-top: 40px; display: flex; width: 100%; flex-flow: row wrap;} .section--for-shopping-centres .container .boxes .box { width: 33.33%; float: left; display: block; position: relative;} @media (max-width: 1000px) { .section--for-shopping-centres .container .boxes .box { width: 50%;}} @media (max-width: 767px) { .section--for-shopping-centres .container .boxes .box { width: 100%;}} .section--for-shopping-centres .container .boxes .box .inside { padding: 20px;} @media (max-width: 767px) { .section--for-shopping-centres .container .boxes .box .inside { padding-left: 0; padding-right: 0;}} .section--for-shopping-centres .container .boxes .box h3 { font-size: 24px; color: #333; width: 80%; margin: 0 auto 10px;} @media (max-width: 1320px) { .section--for-shopping-centres .container .boxes .box h3 { font-size: 18px;}} .section--for-shopping-centres .container .boxes .box .icon { width: 70%; height: 140px; margin: 0 auto 20px; background-size: contain; background-position: center center; background-repeat: no-repeat;} .section--for-shopping-centres .container .boxes .box .icon--1 { background-image: url(../img/section--for-shopping-centres/1.svg);} .section--for-shopping-centres .container .boxes .box .icon--2 { background-image: url(../img/section--for-shopping-centres/2.svg);} .section--for-shopping-centres .container .boxes .box .icon--3 { background-image: url(../img/section--for-shopping-centres/3.svg);} .section--for-shopping-centres .container .boxes .box .icon--4 { background-image: url(../img/section--for-shopping-centres/4.svg);} .section--for-shopping-centres .container .boxes .box .icon--5 { background-image: url(../img/section--for-shopping-centres/5.svg);} .section--for-shopping-centres .container .boxes .box .icon--6 { background-image: url(../img/section--for-shopping-centres/6.svg);} .section--for-shopping-centres .container .boxes .box .icon--7 { background-image: url(../img/section--for-shopping-centres/7.svg);} .section--for-shopping-centres .container .boxes .box .icon--8 { background-image: url(../img/section--for-shopping-centres/8.svg);} .section--for-shopping-centres .container .boxes .box .icon--9 { background-image: url(../img/section--for-shopping-centres/9.svg);} @media (max-width: 1320px) { .section--for-shopping-centres .container .boxes .box .icon { width: 50%; height: 90px;}} .section--for-shopping-centres .container .boxes:after { content: ""; clear: both; display: table;}.section--what-we-offer { background-color: #2da0a6; color: #fff;} .section--what-we-offer .line-skew { height: 140px;} .section--what-we-offer .line-skew:before { height: 140px;} .section--what-we-offer h2.title { color: #2da0a6; position: relative;} .section--what-we-offer h2.title .italic { color: #fff;} .section--what-we-offer h2.title.v1 { text-align: center; font-size: 120px; line-height: 100px; z-index: 110; margin-top: -150px;} @media (max-width: 1320px) { .section--what-we-offer h2.title.v1 { font-size: 80px; line-height: 80px; margin-top: -122px;}} @media (max-width: 767px) { .section--what-we-offer h2.title.v1 { margin-top: -112px;}} .section--what-we-offer h2.title.v1 .italic { font-size: 80px;} @media (max-width: 1320px) { .section--what-we-offer h2.title.v1 .italic { font-size: 60px;}} .section--what-we-offer h2.title.v2 { color: #8cdce0; margin-top: 100px;} @media (max-width: 767px) { .section--what-we-offer h2.title.v2 { margin-top: 30px;}} .section--what-we-offer .ipad { position: absolute; right: -30%; width: 90%; padding-bottom: 50%; top: 48%; background-image: url(../img/section--what-we-offer/ipad.png); background-size: contain; background-repeat: no-repeat; background-position: center right;} @media (max-width: 767px) { .section--what-we-offer .ipad { display: none;}} .section--what-we-offer .container { padding-top: 160px; padding-bottom: 160px;} .section--what-we-offer .container .row { z-index: 1; position: relative;} .section--what-we-offer .container .connect { z-index: 1; position: relative;} .section--what-we-offer .container .connect p.lead { font-size: 48px; width: 75%;} @media (max-width: 1320px) { .section--what-we-offer .container .connect p.lead { font-size: 32px;}} @media (max-width: 767px) { .section--what-we-offer .container .connect p.lead { font-size: 24px; width: 100%;}}.section--faqs { background-color: #333; color: white; font-size: 24px;} @media (max-width: 1320px) { .section--faqs { font-size: 18px;}} .section--faqs:before { content: ''; background-image: url(../img/texture-download.svg); position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0.15;} .section--faqs .container { padding-top: 240px; padding-bottom: 160px;} .section--faqs .container h2.title { text-align: center;} .section--faqs .container h2.title .italic { color: #ccc;} .section--faqs .container .faqs li { padding: 50px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2);} @media (max-width: 767px) { .section--faqs .container .faqs li { padding-top: 25px; padding-bottom: 25px;}} .section--faqs .container .faqs .q { font-size: 36px; cursor: pointer; transition: 0.5s; padding-left: 50px; background-image: url(../img/list/check-white.svg); background-size: 30px; background-repeat: no-repeat; background-position: left center;} @media (max-width: 1320px) { .section--faqs .container .faqs .q { font-size: 24px;}} @media (max-width: 767px) { .section--faqs .container .faqs .q { font-size: 18px; background-size: 20px; padding-left: 35px;}} .section--faqs .container .faqs .q:hover { transform: translateX(10px); padding-left: 60px;} @media (max-width: 767px) { .section--faqs .container .faqs .q:hover { transform: none; padding-left: 35px;}} .section--faqs .container .faqs li.active .q { transform: translateX(10px); padding-left: 50px; color: #2da0a6;} @media (max-width: 767px) { .section--faqs .container .faqs li.active .q { transform: none; padding-left: 35px;}} .section--faqs .container .faqs .a { padding-top: 25px; padding-left: 60px; display: none; transition: none;} @media (max-width: 767px) { .section--faqs .container .faqs .a { padding-left: 0;}}.section--meet-smartrewards { background-color: #fff; text-align: center; font-size: 24px;} .section--meet-smartrewards .line-skew { height: auto; overflow: visible; z-index: 10;} .section--meet-smartrewards .line-skew:after, .section--meet-smartrewards .line-skew:before { transform-origin: bottom left; top: 0; bottom: auto; height: 180px; background-color: #2da0a6;} .section--meet-smartrewards .line-skew:after { z-index: 1; background-image: url(../img/texture-download.svg); opacity: 0.2; content: ''; transform: skewY(-2deg); position: absolute; width: 100%; left: 0;} .section--meet-smartrewards .video-area { background-color: #2da0a6; position: relative;} .section--meet-smartrewards .video-area .video { top: -120px; position: relative; z-index: 20; background-color: #2da0a6; border-radius: 50px; margin: 0 auto; box-shadow: 2px 2px 35px rgba(0, 0, 0, 0.15); overflow: hidden; width: 80%; padding-bottom: 45%;} @media (max-width: 767px) { .section--meet-smartrewards .video-area .video { top: -30px; width: 90%; padding-bottom: 52%;}} .section--meet-smartrewards .video-area .video iframe { width: 100%; height: 100%; top: 0; left: 0; position: absolute; border: 0;} .section--meet-smartrewards .container { padding-top: 160px; padding-bottom: 160px;} @media (max-width: 767px) { .section--meet-smartrewards .container { padding-top: 80px; padding-bottom: 50px;}} .section--meet-smartrewards .container h2.title { color: #333;} @media (max-width: 1420px) { .section--meet-smartrewards .container h3.subtitle { font-size: 36px;}} @media (max-width: 1320px) { .section--meet-smartrewards .container h3.subtitle { font-size: 30px;}} @media (max-width: 1000px) { .section--meet-smartrewards .container h3.subtitle { font-size: 24px;}}.section--testimonials { background-color: #2da0a6; text-align: center; font-size: 24px; color: white;} @media (max-width: 767px) { .section--testimonials { font-size: 18px;}} .section--testimonials .container { padding-top: 0; padding-bottom: 0;} .section--testimonials .container h2.title { font-size: 60px;} @media (max-width: 1000px) { .section--testimonials .container h2.title { line-height: normal;}} @media (max-width: 767px) { .section--testimonials .container h2.title { font-size: 36px;}} .section--testimonials .container h3.subtitle { font-size: 36px;} @media (max-width: 767px) { .section--testimonials .container h3.subtitle { font-size: 24px;}} .section--testimonials .container .testimonials-area { font-size: 18px; margin-top: 60px; text-align: left;} @media (max-width: 1000px) { .section--testimonials .container .testimonials-area { font-size: 14px;}} .section--testimonials .container .testimonials-area .slick-arrow, .section--testimonials .container .testimonials-area .buttons { background-color: rgba(255, 255, 255, 0.1); border-radius: 2000px; box-shadow: 2px 2px 35px rgba(0, 0, 0, 0.05); width: 60px; height: 60px; position: absolute; top: 50%; line-height: 53px; text-align: center; font-size: 36px; cursor: pointer; transition: 0.5s; background-size: 25%; background-position: center center; background-repeat: no-repeat;} @media (max-width: 767px) { .section--testimonials .container .testimonials-area .slick-arrow, .section--testimonials .container .testimonials-area .buttons { display: none !important;}} .section--testimonials .container .testimonials-area .slick-arrow:hover, .section--testimonials .container .testimonials-area .buttons:hover { background-color: white; color: #2da0a6;} .section--testimonials .container .testimonials-area .slick-arrow.slick-prev, .section--testimonials .container .testimonials-area .buttons.slick-prev, .section--testimonials .container .testimonials-area .slick-arrow--left, .section--testimonials .container .testimonials-area .buttons--left { left: 0; background-image: url(../img/arrow-left-white.svg);} .section--testimonials .container .testimonials-area .slick-arrow.slick-prev:hover, .section--testimonials .container .testimonials-area .buttons.slick-prev:hover, .section--testimonials .container .testimonials-area .slick-arrow--left:hover, .section--testimonials .container .testimonials-area .buttons--left:hover { background-image: url(../img/arrow-left-color.svg);} .section--testimonials .container .testimonials-area .slick-arrow.slick-prev:after, .section--testimonials .container .testimonials-area .buttons.slick-prev:after, .section--testimonials .container .testimonials-area .slick-arrow--left:after, .section--testimonials .container .testimonials-area .buttons--left:after { content: '';} .section--testimonials .container .testimonials-area .slick-arrow.slick-next, .section--testimonials .container .testimonials-area .buttons.slick-next, .section--testimonials .container .testimonials-area .slick-arrow--right, .section--testimonials .container .testimonials-area .buttons--right { right: 0; background-image: url(../img/arrow-right-white.svg);} .section--testimonials .container .testimonials-area .slick-arrow.slick-next:hover, .section--testimonials .container .testimonials-area .buttons.slick-next:hover, .section--testimonials .container .testimonials-area .slick-arrow--right:hover, .section--testimonials .container .testimonials-area .buttons--right:hover { background-image: url(../img/arrow-right-color.svg);} .section--testimonials .container .testimonials-area .slick-arrow.slick-next:after, .section--testimonials .container .testimonials-area .buttons.slick-next:after, .section--testimonials .container .testimonials-area .slick-arrow--right:after, .section--testimonials .container .testimonials-area .buttons--right:after { content: '';} .section--testimonials .container .testimonials-area .testimonials > * { outline: 0;} .section--testimonials .container .testimonials-area .testimonials .slick-list { background-color: rgba(255, 255, 255, 0.05); border-radius: 20px; box-shadow: 2px 2px 35px rgba(0, 0, 0, 0.05); width: calc(100% - 200px); margin: 0 auto; max-width: 960px; position: relative; overflow: hidden;} @media (max-width: 767px) { .section--testimonials .container .testimonials-area .testimonials .slick-list { width: 100%;}} .section--testimonials .container .testimonials-area .testimonials .slick-list:after { content: ""; clear: both; display: table;} .section--testimonials .container .testimonials-area .testimonials .box { padding: 60px 0; display: block; width: 100%; float: left;} @media (max-width: 767px) { .section--testimonials .container .testimonials-area .testimonials .box { padding: 20px 0;}} .section--testimonials .container .testimonials-area .testimonials .box .text, .section--testimonials .container .testimonials-area .testimonials .box .img { float: left; min-height: 1px; position: relative; overflow: hidden; min-height: 200px;} @media (max-width: 1000px) { .section--testimonials .container .testimonials-area .testimonials .box .text, .section--testimonials .container .testimonials-area .testimonials .box .img { float: none; min-height: 0;}} .section--testimonials .container .testimonials-area .testimonials .box .img { width: 33.33%; min-height: 200px;} @media (max-width: 1000px) { .section--testimonials .container .testimonials-area .testimonials .box .img { width: 100%;}} .section--testimonials .container .testimonials-area .testimonials .box .img .avatar { width: 200px; height: 200px; background-color: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 2000px; background-size: cover; background-position: center center; border: 10px solid #6ab0ba; box-shadow: 2px 2px 35px rgba(0, 0, 0, 0.05);} .section--testimonials .container .testimonials-area .testimonials .box .text { width: 66.66%; padding: 0 40px 0 0;} @media (max-width: 1000px) { .section--testimonials .container .testimonials-area .testimonials .box .text { text-align: center; padding: 20px 40px 0; width: 100%;}} @media (max-width: 767px) { .section--testimonials .container .testimonials-area .testimonials .box .text { padding: 20px 10px 0;}} .section--testimonials .container .testimonials-area .testimonials .box .text h4, .section--testimonials .container .testimonials-area .testimonials .box .text h5 { font-size: 24px;} .section--testimonials .container .testimonials-area .testimonials .box .text h5 { margin-bottom: 20px; color: rgba(255, 255, 255, 0.5);} .section--testimonials .container .testimonials-area .testimonials .box .text { width: 100%; min-height: 0; text-align: center; padding: 40px !important;} .section--testimonials .container .testimonials-area .testimonials .box:after { content: ""; clear: both; display: table;} .section--testimonials .container .testimonials-area .testimonials:after { content: ""; clear: both; display: table;}.section--gallery { background-color: #2da0a6;} .section--gallery .gallery img { display: block; height: 240px; float: left; outline: 0;}.section--demo-steps { background-color: white;} .section--demo-steps.step--0 .slides { transform: translateX(0);} .section--demo-steps.step--1 .slides { transform: translateX(-244px);} .section--demo-steps.step--2 .slides { transform: translateX(-488px);} .section--demo-steps .container { padding-top: 140px; padding-bottom: 140px;} @media (max-width: 767px) { .section--demo-steps .container { padding-top: 70px; padding-bottom: 70px;}} .section--demo-steps .container .phone { position: relative; padding-bottom: 450px; margin: 0 -10px -40px;} .section--demo-steps .container .phone .monitor { transform: translateX(-50%) translateY(-50%) translateZ(0) rotateX(44deg) rotateY(0deg) rotateZ(46deg); box-shadow: 5px 5px 50px rgba(0, 0, 0, 0.2); position: absolute; top: 50%; left: 50%; z-index: 10; background-size: contain; overflow: hidden; background-color: white; margin: -28px 0 0 -3px; width: 244px; height: 434px;} .section--demo-steps .container .phone .monitor .slides { position: absolute; top: 0; width: 732px; height: 434px; transition: 0.5s; background-color: white;} .section--demo-steps .container .phone .monitor .slides .slide { position: absolute; top: 0; width: 244px; height: 434px; background-size: contain; background-repeat: no-repeat; background-position: center center;} .section--demo-steps .container .phone .monitor .slides .slide--1 { left: 0; background-image: url(../img/section--why-use/001.jpg);} .section--demo-steps .container .phone .monitor .slides .slide--2 { left: 244px; background-image: url(../img/section--why-use/002.jpg);} .section--demo-steps .container .phone .monitor .slides .slide--3 { left: 488px; background-image: url(../img/section--why-use/003.jpg);} .section--demo-steps .container .phone .bg { background-size: contain; background-image: url(../img/section--demo-steps/iphone.png); background-position: center center; background-repeat: no-repeat; position: absolute; height: 460px; width: 640px; top: 0; left: 50%; margin-left: -320px; transform: translate(0, 0);} .section--demo-steps .container h2.title { width: 50%; min-width: 580px; text-align: right; font-size: 60px; color: #2da0a6; position: absolute; z-index: 100;} @media (max-width: 1320px) { .section--demo-steps .container h2.title { font-size: 48px;}} @media (max-width: 1000px) { .section--demo-steps .container h2.title { width: 100%; min-width: 0; text-align: center;}} .section--demo-steps .container h2.title .italic { color: #333;} .section--demo-steps .container .steps { font-size: 30px; color: #666; position: relative; z-index: 10;} @media (max-width: 1320px) { .section--demo-steps .container .steps { font-size: 24px;}} @media (max-width: 1000px) { .section--demo-steps .container .steps { font-size: 18px; padding: 10px 0;}} @media (max-width: 767px) { .section--demo-steps .container .steps { font-size: 14px;}} .section--demo-steps .container .steps h4 { color: #333; transition: 0.7s;} .section--demo-steps .container .steps .dot { width: 100px; height: 100px; position: relative; margin: 0 auto 20px; transition: 0.5s;} @media (max-width: 767px) { .section--demo-steps .container .steps .dot { float: left; width: 40px; height: 40px; margin-right: 10px;}} .section--demo-steps .container .steps .dot .number { color: white; font-size: 72px; position: relative; text-align: center; top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); color: white; z-index: 1; display: block; font-family: 'brandon_grotesqueblack', sans-serif; transition: 0.5s;} @media (max-width: 1320px) { .section--demo-steps .container .steps .dot .number { font-size: 48px;}} @media (max-width: 767px) { .section--demo-steps .container .steps .dot .number { font-size: 24px;}} .section--demo-steps .container .steps .dot .round { width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: 1000px; background-color: #2da0a6; display: block; transition: 0.5s;} .section--demo-steps .container .steps .step { width: 33.33%; float: left; text-align: center; padding: 24px 24px 0; cursor: default;} @media (max-width: 767px) { .section--demo-steps .container .steps .step { width: 100%; text-align: left; padding: 10px 0;}} .section--demo-steps .container .steps .step.active h4, .section--demo-steps .container .steps .step:hover h4 { color: #2da0a6;} @media (max-width: 767px) { .section--demo-steps .container .steps .step.active, .section--demo-steps .container .steps .step:hover { color: #2da0a6;}} .section--demo-steps .container .steps .step.active .dot, .section--demo-steps .container .steps .step:hover .dot { transform: scale(1.1);} @media (max-width: 767px) { .section--demo-steps .container .steps .step.active .dot, .section--demo-steps .container .steps .step:hover .dot { transform: none;}} .section--demo-steps .container .steps:after { content: ""; clear: both; display: table;}.section--subscribe { background-color: #333; color: white; text-align: center;} .section--subscribe:before { content: ''; background-image: url(../img/texture-download.svg); position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0.15;} .section--subscribe .container { padding-top: 120px; padding-bottom: 120px;} .section--subscribe .container h2.title .italic { color: #ccc;} .section--subscribe .container .form { background-color: rgba(255, 255, 255, 0.15); border-radius: 200px; width: 100%; max-width: 480px; margin: 10px auto 20px; position: relative; overflow: hidden; transition: 0.5s; height: 66px;} .section--subscribe .container .form:after { position: absolute; top: 0; right: 0; bottom: 0; width: 66px; font-size: 36px; color: white; line-height: 60px; content: '»'; overflow: hidden; background-size: 30%; background-position: center center; background-repeat: no-repeat;} .section--subscribe .container .form input { transition: 0.5s; overflow: hidden;} .section--subscribe .container .form--sent { width: 240px; height: 240px;} .section--subscribe .container .form--loading:after { text-indent: 9999px; background-image: url(../img/load333.gif);} .section--subscribe .container .form--loading:after, .section--subscribe .container .form--loading input { cursor: default !important;} .section--subscribe .container .form--sent:after, .section--subscribe .container .form--sent input { height: 0; padding-top: 0 !important; padding-bottom: 0 !important; visibility: hidden; opacity: 0;} .section--subscribe .container .form span.sent { width: 180px; height: 180px; margin: 30px; background-size: contain; background-repeat: no-repeat; background-position: center center; background-image: url(../img/section--subscribe/email.svg); width: 140px; margin: 0 50px; display: block; transition: 0.5s; opacity: 0; height: 0;} .section--subscribe .container .form--sent span.sent { height: 140px; margin: 50px; opacity: 1;} .section--subscribe .container .form input[type="submit"] { position: absolute; top: 0; right: 0; bottom: 0; width: 66px; outline: 0; border: 0; background-color: transparent; margin: 0; padding: 0; cursor: pointer; opacity: 0; z-index: 10;} .section--subscribe .container .form input[type="text"] { outline: 0; padding: 20px 66px; font-size: 18px; text-align: center; border: 0; text-transform: uppercase; background-color: transparent; display: block; width: 100%; color: white;} .section--subscribe .container .form input[type="text"]::-webkit-input-placeholder { color: white;} .section--subscribe .container .form input[type="text"]::-moz-placeholder { color: white;} .section--subscribe .container .form input[type="text"]:-ms-input-placeholder { color: white;} .section--subscribe .container .form input[type="text"]:-moz-placeholder { color: white;} .section--subscribe .container .form input[type="text"].error { background-color: rgba(255, 0, 0, 0.2);}.section--download { background-color: #2da0a6; color: white; text-align: center;} .section--download .container { padding-top: 160px; padding-bottom: 160px;} @media (max-width: 767px) { .section--download .container { padding-top: 80px; padding-bottom: 80px;}} .section--download .container .buttons { margin-top: 20px;} .section--download .container .buttons > * { display: inline-block; width: 320px; height: 100px; background-color: black; background-size: contain; background-position: center center; background-repeat: no-repeat; border-radius: 15px; margin: 20px; box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2); transition: 0.5s; cursor: pointer;} .section--download .container .buttons > *.apple { background-image: url(../img/button-download-apple.png);} .section--download .container .buttons > *.google { background-image: url(../img/button-download-google.png);} .section--download .container .buttons > *:hover { transform: scale(1.03); background-color: #333;} @media (max-width: 1000px) { .section--download .container .buttons > * { margin: 10px; width: 300px;}} @media (max-width: 767px) { .section--download .container .buttons > * { margin: 5px; width: calc(100% - 40px); height: auto; padding-bottom: 30%;}}.section--logos { background-color: #e5e5e5; color: white; text-align: center;} .section--logos .container { padding: 100px 0;} @media (max-width: 767px) { .section--logos .container { padding: 50px 0;}} .section--logos .container ul { opacity: 0.2; overflow: hidden;} .section--logos .container ul li { width: 25%; float: left; display: block; padding: 0 35px; outline: 0;} .section--logos .container ul li span { display: block; padding-bottom: 50%; width: 100%; background-size: contain; background-repeat: no-repeat; background-position: center center;} .section--logos .container ul:after { content: ""; clear: both; display: table;}.section--social { padding-top: 140px; font-size: 24px;} @media (max-width: 767px) { .section--social { padding-top: 50px;}} .section--social .box { width: 25%; padding-bottom: 25%; float: left; position: relative; color: white; overflow: hidden; transition: 0.5s;} html.unloaded .section--social .box { transform: translateY(-100px); opacity: 0;} html.unloaded-delay .section--social .box:nth-child(1) { transition-delay: 0.2s;} html.unloaded-delay .section--social .box:nth-child(2) { transition-delay: 0.4s;} html.unloaded-delay .section--social .box:nth-child(3) { transition-delay: 0.6s;} html.unloaded-delay .section--social .box:nth-child(4) { transition-delay: 0.8s;} html.unloaded-delay .section--social .box:nth-child(5) { transition-delay: 1s;} html.unloaded-delay .section--social .box:nth-child(6) { transition-delay: 1.2s;} html.unloaded-delay .section--social .box:nth-child(7) { transition-delay: 1.4s;} html.unloaded-delay .section--social .box:nth-child(8) { transition-delay: 1.6s;} html.unloaded-delay .section--social .box:nth-child(9) { transition-delay: 1.8s;} html.unloaded-delay .section--social .box:nth-child(10) { transition-delay: 2s;} html.unloaded-delay .section--social .box:nth-child(11) { transition-delay: 2.2s;} html.unloaded-delay .section--social .box:nth-child(12) { transition-delay: 2.4s;} html.unloaded-delay .section--social .box:nth-child(13) { transition-delay: 2.6s;} html.unloaded-delay .section--social .box:nth-child(14) { transition-delay: 2.8s;} html.unloaded-delay .section--social .box:nth-child(15) { transition-delay: 3s;} html.unloaded-delay .section--social .box:nth-child(16) { transition-delay: 3.2s;} html.unloaded-delay .section--social .box:nth-child(17) { transition-delay: 3.4s;} .section--social .box .ico { width: 84px; height: 84px; position: absolute; bottom: 0; right: 10px; z-index: 10;} .section--social .box .ico:after { content: ''; width: 36px; height: 36px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-size: contain; background-repeat: no-repeat; background-position: center center;} @media (max-width: 1320px) { .section--social .box { width: 33.33%; padding-bottom: 33.33%;}} .section--social .box--video video, .section--social .box--video iframe { background: transparent; left: 0; top: 0; border: 0; width: 100%; height: calc(100% + 80px); position: absolute;} @media (max-width: 1320px) { .section--social .box--video video, .section--social .box--video iframe { height: calc(100% + 40px);}} .section--social .box--video .ico:after { background-image: url(../img/video.svg);} .section--social .box--video .info { padding-right: 80px !important; padding-bottom: 20px !important; height: auto !important; bottom: auto !important;} .section--social .box--video .info, .section--social .box--video .ico { bottom: auto; top: 0;} .section--social .box--instagram { width: 50%; padding-bottom: 50%;} @media (max-width: 1320px) { .section--social .box--instagram { width: 66.66%; padding-bottom: 66.66%;}} .section--social .box--instagram .ico:after { background-image: url(../img/instagram.svg);} .section--social .box--facebook .ico:after { background-image: url(../img/facebook.svg);} .section--social .box--twitter .image { opacity: 0; transition: 0.5s; transform: none; z-index: 10;} .section--social .box--twitter:hover .image { opacity: 1; transform: none;} .section--social .box--twitter .image-grid { transition: 0.5s; opacity: 0 !important; z-index: 14 !important;} .section--social .box--twitter:hover .image-grid { opacity: 0.5 !important;} .section--social .box--twitter .info { z-index: 15 !important;} .section--social .box--twitter .ico { z-index: 16 !important;} .section--social .box--twitter .ico:after { background-image: url(../img/twitter.svg);} .section--social .box--even { width: 25%; padding-bottom: 25%;} @media (max-width: 1320px) { .section--social .box--even { width: 33.33%; padding-bottom: 33.33%;}} .section--social .box:hover { background-color: #25858a !important;} .section--social .box:hover .image { transform: scale(1.05);} @media (max-width: 1000px) { .section--social .box { width: 50%; padding-bottom: 50%;}} @media (max-width: 767px) { .section--social .box { width: 100%;}} @media (max-width: 480px) { .section--social .box { padding-bottom: 100%; font-size: 18px;}} .section--social .box--color-1 { background-color: #2ea4aa;} .section--social .box--color-2 { background-color: #30acb2;} .section--social .box--color-3 { background-color: #32b3ba;} .section--social .box--color-4 { background-color: #35bbc2;} .section--social .box--color-5 { background-color: #38c2c9;} .section--social .box--color-6 { background-color: #40c4cb;} .section--social .box__content { padding: 40px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transition: 0.5s;} @media (max-width: 1000px) { .section--social .box__content { padding: 20px;}} .section--social .box__content .content { position: relative; z-index: 2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;} .section--social .box__content .image { position: absolute; top: -5px; right: -5px; bottom: -5px; left: -5px; background-size: cover; background-position: center center; background-repeat: no-repeat; transition: 3s;} .section--social .box__content .image-grid { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(../img/v-green.png); z-index: 1; opacity: 0.5;} .section--social .box__content .info { position: absolute; bottom: 0; left: 0; right: 0; background-color: rgba(35, 125, 130, 0.9); padding: 20px 40px 0; height: 84px; opacity: 0; transition: 0.5s; z-index: 3;} @media (max-width: 1000px) { .section--social .box__content .info { padding: 20px;}} .section--social .box__content .info h3 { font-size: 17px; text-transform: uppercase;} .section--social .box__content .info span { display: block; margin: 0; font-size: 15px;} .section--social .box__content:hover .info { opacity: 1;} .section--social .box__content a { color: white; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 20;}#download-table { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(45, 160, 166, 0.99); z-index: 10000; transition: 0.5s; color: white; font-size: 24px; min-height: 640px; text-align: center; opacity: 0; visibility: hidden; text-transform: uppercase;} html.show-download #download-table { opacity: 1; visibility: visible;} #download-table .logo { background-image: url(../img/nav/logo-white.svg); position: absolute; top: 0; transition: 0.5s; background-size: contain; background-repeat: no-repeat; background-position: center center; left: 50%; width: 80px; height: 50px; margin-left: -40px;} #download-table table { transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; text-align: left; transform: translate(-50%, -50%) scale(0.9); transition: 0.5s;} html.show-download #download-table table { transform: translate(-50%, -50%) scale(1);} #download-table table td { padding: 10px;} #download-table table td.head { text-align: center; padding: 0 30px 30px;} #download-table table td.head h2.title { font-size: 32px; line-height: 48px;} #download-table table td.head h3.subtitle { font-size: 18px; line-height: 24px;} #download-table table td:first-child { padding-right: 30px;} @media (max-width: 767px) { #download-table table td:first-child { padding-right: 10px;}} @media (max-width: 767px) { #download-table table td { padding: 5px;}} #download-table table td span, #download-table table td a { display: block; width: 30px; height: 30px; background-size: contain; background-repeat: no-repeat; background-position: center center; opacity: 0.7; transition: 0.5s;} #download-table table td span:hover, #download-table table td a:hover { opacity: 1; transform: scale(1.2);} #download-table table td span { opacity: 0.2;} #download-table table td span:hover { opacity: 0.2; transform: scale(1);} #download-table table td.ios span, #download-table table td.ios a { background-image: url(../img/apple.svg);} #download-table table td.android span, #download-table table td.android a { background-image: url(../img/android.svg);}#nav { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(45, 160, 166, 0.95); z-index: 10000; transition: 0.5s; color: white; font-size: 36px; line-height: 36px; text-align: center; opacity: 0; visibility: hidden;} @media (max-width: 767px) { #nav { font-size: 24px;}} #nav .logo { background-image: url(../img/nav/logo-white.svg); position: absolute; top: 0; transition: 0.5s; background-size: contain; background-repeat: no-repeat; background-position: center center; left: 50%; width: 80px; height: 50px; margin-left: -40px;} html.show-nav #nav { opacity: 1; visibility: visible;} #nav ul { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: 1s; text-transform: uppercase; width: 100%;} #nav ul li { transform: translateX(-20px); opacity: 0; transition: 0.5s;} html.show-nav #nav ul li { opacity: 1; transform: translateX(0);} #nav ul li:nth-child(1) { transition-delay: 0.2s;} #nav ul li:nth-child(2) { transition-delay: 0.4s;} #nav ul li:nth-child(3) { transition-delay: 0.6s;} #nav ul li:nth-child(4) { transition-delay: 0.8s;} #nav ul li:nth-child(5) { transition-delay: 1s;} #nav ul li:nth-child(6) { transition-delay: 1.2s;} #nav ul li a { color: white; display: block; padding: 10px;} #nav ul li a.active { color: #64cfd5;}.parallax { background-size: cover; background-attachment: fixed; padding-bottom: 33%; background-color: #333; position: relative;} html.isMobile .parallax { background-attachment: scroll;}#footer { padding-top: 80px; padding-bottom: 80px; padding-left: 0; padding-right: 0; background-color: white; position: relative; text-align: center; font-size: 14px; text-transform: uppercase;} @media (max-width: 767px) { #footer p { width: 75%; margin: 0 auto;}} #footer .social ul { margin-bottom: 30px;} #footer .social ul li { display: inline-block; width: 80px; height: 80px; border-radius: 1000px; margin: 0 10px; background-color: #c0c0c0; background-size: 50%; background-repeat: no-repeat; background-position: center center; transition: 0.5s;} @media (max-width: 767px) { #footer .social ul li { width: 50px; height: 50px; margin: 0 2px;}} #footer .social ul li.facebook { background-image: url(../img/footer/facebook.svg);} #footer .social ul li.google { background-image: url(../img/footer/google.svg);} #footer .social ul li.instagram { background-image: url(../img/footer/instagram.svg);} #footer .social ul li.twitter { background-image: url(../img/footer/twitter.svg);} #footer .social ul li a { display: block; width: 100%; height: 100%;} #footer .social ul li:hover { background-color: #2da0a6;} @media (max-width: 767px) { #footer ul#privacyLinks { padding-top: 20px;}} #footer ul#privacyLinks li { text-align: center; display: inline-block;} #footer ul#privacyLinks li a { display: block; padding: 15px;} @media (max-width: 767px) { #footer ul#privacyLinks li { display: block;}}